<template>
	<view class="mainPage forgetpswd" :style="{'padding-top': `${$store.state.safeArea.top || 0}px`, 'padding-bottom': `${$store.state.safeArea.bottom || 0}px`}">
		<public-head :title="title"></public-head>
		<view>
			<u-field v-model="mobile" label="手机号" placeholder="请填写手机号" maxlength="11">
			</u-field>
			<u-field v-model="code" label="验证码" placeholder="请填写验证码">
				<u-button size="mini" slot="right" type="warning" @click="getCode">{{codeText}}</u-button>
			</u-field>
			<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
		</view>
		<view>
			<view>
				<view class="determines" v-if="mobile&&code" @click="next">下一步</view>
				<view class="determine" v-else>下一步</view>
			</view>
			<view class="forget" @click="show=true">收不到短信验证码？</view>
		</view>
		<!-- 弹框 -->
		<u-popup v-model="show" mode="center" width="550rpx" height="324rpx" border-radius="15" closeable="true">
			<view class="u-popup">
				<view class="texttitle">收不到验证码</view>
				<view class="textcon">
					<view>1.由于运营商网络原因，可能存在短信延迟，请耐心等待或稍后再试</view>
					<view>2.请查看短信是否被手机安全软件拦截</view>
					<view>3.非以上因素，请联系客服</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
var that
import publicHead from "@/components/publicHead/publicHead.vue"
export default {
	components: {
		publicHead
	},
	data() {
		return {
			title: "忘记密码",
			mobile: '',
			code: '',
			codeText: '',
			show: false,
			verify_code: ''
		}
	},
	onLoad() {
		that = this
	},
	methods: {
		codeChange(text) {
			this.codeText = text;
		},
		getCode() {
			if (!(/^1[3456789]\d{9}$/.test(that.mobile))) {
				uni.showToast({
					title: "手机号格式错误！",
					icon: "none"
				})
				return
			}
			if (this.$refs.uCode.canGetCode) {
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码'
				})
				let postData = {
					status: 5,
					phone: that.mobile,
					source: 2
				}
				that.$postAjax1('Doctor_send_code', postData, function (data) {
					setTimeout(() => {
						uni.hideLoading();
						// 通知验证码组件内部开始倒计时
						that.$refs.uCode.start();
					}, 1000);
				})
			} else {
				this.$u.toast('倒计时结束后再发送');
			}
		},
		customStyle: {
			BackgroundColor: '#fff',
			color: '#FE7600', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
			FontSize: '28rpx'
		},
		next() {
			if (!(/^1[3456789]\d{9}$/.test(that.mobile))) {
				uni.showToast({
					title: "手机号格式错误！",
					icon: "none"
				})
			} else if (that.code == '') {
				uni.showToast({
					title: "请输入验证码！",
					icon: "none"
				})
			} else {
				let data = {
					form_type: 0,
					phone: that.mobile,
					code: that.code
				}
				that.$postAjax1('Doctor_doctorForgetPassword', data, function (data) {
					console.log('下一步')
					that.verify_code = data.data.data.verify_code
					uni.navigateTo({
						url: './setpassword?verify_code=' + that.verify_code
					})
				})
			}
		}
	}
}
</script>
<style scoped lang="scss">
.forgetpswd {
	.determine {
		background: #c4c4c6;
		border-radius: 46rpx;
		margin: 100rpx 60rpx;
		padding: 24rpx 266rpx;
		color: #ffffff;
		font-size: 32rpx;
	}
	.determines {
		background: #ff8f2b;
		box-shadow: 0px 6rpx 8rpx 0px rgba(255, 143, 43, 0.2);
		border-radius: 46rpx;
		margin: 100rpx 60rpx;
		padding: 24rpx 266rpx;
		color: #ffffff;
		font-size: 32rpx;
	}
	.forget {
		position: absolute;
		bottom: 168rpx;
		font-size: 26rpx;
		color: #fe7600;
		text-align: center;
		width: 100%;
	}
	.u-popup {
		background: #ffffff;
		padding: 32rpx;
		.texttitle {
			font-size: 32rpx;
			font-weight: 500;
			color: #1e1e1e;
			line-height: 44rpx;
			text-align: center;
		}
		.textcon {
			font-size: 28rpx;
			color: #1e1e1e;
			line-height: 48rpx;
			margin-top: 24rpx;
		}
	}
}
</style>
